<template>
  <div>
    <el-button text @click="dialogFormVisible = true">新增请假</el-button>

    <el-dialog v-model="dialogFormVisible" title="新增请假信息">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="请假理由" prop="reason">
          <el-input v-model="ruleForm.reason" />
        </el-form-item>
        <el-form-item label="开始时间" prop="start">
          <el-date-picker
            v-model="ruleForm.start"
            type="datetime"
            placeholder="请选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="end">
          <el-date-picker
            v-model="ruleForm.end"
            type="datetime"
            placeholder="请选择结束时间"
          />
        </el-form-item>
        <el-form-item label="附件" prop="extend">
          <el-input v-model="ruleForm.extend" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <Studentlist :data="info.list" type="1"></Studentlist>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted} from "vue";
import { useRoute, useRouter } from "vue-router";
import { addLeave,studentLeaveList} from "../model/leave";
import { ElMessage, ElLoading } from "element-plus";
import Studentlist from './StudentList.vue'
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const router = useRouter();
const route = useRoute();
const ruleFormRef = ref();
let info  = reactive({
  list:[]
})
onMounted(async ()=>{
  let {data} =await  studentLeaveList()
  if(data.code == 200){
    info.list = data.msg
  }
})
const ruleForm = reactive({
  reason: "",
  start: "",
  end: "",
  extend: "",
})

const rules = reactive({
  reason: [{ required: true, message: "请假理由不能为空", trigger: "blur" }],
  start: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
  end: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
});
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let start = new Date(ruleForm.start);
      let end = new Date(ruleForm.end);
      if (start > end) {
        ElMessage({
          showClose: true,
          message: "开始时间不能大于结束时间",
          type: "error",
        });
      } else {
        const loading = ElLoading.service({
          lock: true,
          text: "提交中...",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let { data } = await addLeave({
          reason: ruleForm.reason,
          start: ruleForm.start,
          end: ruleForm.end,
          extend: ruleForm.extend,
        });
        if (data.code == 200) {
          if(data.result.length){
            info.list.unshift(data.result[0])
          }
          
          setTimeout(() => {
            loading.close();
            resetForm(ruleFormRef.value)
              ElMessage({
            showClose: true,
            message: "提交成功",
            type: "success",
          });
          }, 2000);
        
        }else{
           setTimeout(() => {
            loading.close();
            resetForm(ruleFormRef.value)
             ElMessage({
            showClose: true,
            message: "提交失败请重新提交",
            type: "error",
          });
          }, 2000);
        }
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
   dialogFormVisible.value = false
};
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.is-text {
  background-color: skyblue;
}
</style>